/*eslint-disable*/
import { useState } from "react"
import styled from "styled-components"
import nowTime from 'nowTime';


const Wrapper=styled.div`
    display:flex;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
    justify-content: space-between;
    align-items:center;
    padding:10px;
    margin-top:15px ;
    background:#eeeef1;
    >.titleDate{
        white-space:nowrap;   
    }
    >.content-wrapper{
        overflow:auto;
        max-height:80px;
        flex-grow:1;
        display:flex;
        flex-wrap:warp;
        align-items:center;
        background:#eeeef1;
        margin:0px 10px;
        padding:5px;
        
    }
`
type Todolist={
    [date:string]:string
}
type PropTodolist={
    key:number;
    onChange:(a:string,b:string)=>void;
    todolist:Todolist
}

const Zgn_todolist=(props:PropTodolist)=>{
    let keys = Object.keys(props.todolist)
    let [inputVal,setInputVal]=useState(props.todolist[nowTime()])
    const newVal=()=>{
        let a =window.prompt('请输入新的待办信息')
        if(a===null){
            return
        }else{
            setInputVal(a)        
            props.onChange(a,props.todolist[nowTime()])
        }
        
    }
    
        return(
            <Wrapper>
                <div className="titleDate">{keys[0]}</div>
                <div  className="content-wrapper"   onClick={()=>{newVal()}}>
                    {inputVal}
                </div>           
            </Wrapper>
        )
        
    
}

export default Zgn_todolist